<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>树洞登录界面</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../css/login.css"/>
    <style>
        .password i{
            background: url("../img/eye.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
            position: absolute;
            right: 5%;
            top: -20%;
            width: 0.6rem;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="layer">
    <div class="box clearfix">
        <div class="username">
            <span></span>
            <input type="text" id="name" placeholder="账号"/> </div>
        <div class="password"><span></span> <input type="password"  id="pwd" placeholder="密码"/><i class="eye"></i></div>
        <button class="login_Button">登录</button>

        <div class="pwd_user clearfix">
            <button class="register_Button" onclick="location.href='./register.html'">无账号？ 立即注册？</button>
            <p class="forget_password" >忘记密码？</p>
        </div>
        <div class="footer" >
            <laber style="display: none">
                <div class="remember">
                    <input type="checkbox" id="check" checked/>  记住密码
                </div>
            </laber>
            <div class="show-box" />
        </div> <!--// 注意嵌在 label 里面-->
       <div class="third_login">
           <span></span>
          <i> 第三方登录</i>
           <span></span>
       </div>
        <div class="link">
            <a href=""><img src="../img/icon_QQ.png" alt=""/></a>
            <a href=""> <img src="../img/we_chat.png" alt=""/></a>
            <a href=""><img src="../img/sina.png" alt=""/></a>
        </div>

    </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script>
    //判断 本地有没有密码 和 账号 实现 记住密码的功能；
   /* if(localStorage.getItem("uName")&&localStorage.getItem("pwd")){
        location.href="./focus.html";
    }*/
    //点击小眼睛 改变input的状态
    var flag=true;
    $(".eye").click(function(){
        if(flag){
            $(".password input[type='password']").attr("type","text");
            $(this).css("background-image","url(../img/close_eyes1.png)");
            flag=false;
        }else{
            $(" .password input[type='text']").attr("type","password");
            $(this).css("background-image","url(../img/eye.png)");
            flag=true;
        }
    });

    function login() {
        var uName = $("#name").val();
        var pwd = $("#pwd").val();
        var obj = {};
        if (isNotBlank(uName)) {
            if (!checkTelNum(uName)) {
                alert('手机号格式不正确，请您重新输入');
                $("input").val("");
                return false;
            }
            else {
                obj.mobilePhone = uName;
            }
        }
        else {
            alert('手机号/用户名不能为空');
            $("input").val("");
            return false;
        }
        if (isNotBlank(pwd)) {
            obj.password = pwd;
        } else {
            alert('密码不能为空');
            $("#pwd").val("");
            return false;
        }
        //console.log(JSON.stringify(obj));
        //还需要验证数据库里面有没有这个手机号的记录需要发送ajax
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            type: "post",
            async: false,
            url: baseUrl+"/student/mobilePhoneLogin",
            data: obj,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                /*if (data.msg == "账号错误") {
                    alert("该账号不存在，请您查证后输入");
                    $("input").val("");
                }else if(data.msg == "密码错误"){
                    alert("密码错误");
                    $("#pwd").val("");
                }*/
                if (data.code == "success") {
                    localStorage.setItem('userId',data.userId);
                    localStorage.setItem('user', data.code);
                    //用户登录成功之后 存储用户输入的值
                    if($('#check').is(':checked')){
                        // 获取设置的本地存储的用户名的值
                        var loUser = localStorage.setItem('uName',uName);
                        // 获取设置的本地存储的密码的值
                        var loPass = localStorage.setItem('pwd',pwd);

                    };
                    window.location.href = "./news.html";
                }else{
                    alert("用户名/密码错误");
                }
            }
        })

    }
    //页面加载 渲染的时候要判断是否存在


    function isChecked(){
        //获取cookie
        var cusername = localStorage.getItem("uName");
        var cpassword = localStorage.getItem("pwd");

        if(cusername != "" && cpassword != ""){
            $("#name").val(cusername);
            $("#pwd").val(cpassword);
        }
    }
    if(localStorage.getItem("uName")!=="" && localStorage.getItem("pwd") !==""){
        isChecked();
    }

    /*点击的登录 调用此函数  */
    $(".login_Button").click(function(){
        login();

    });
    //点击注册 跳转到注册界面
    $(".register_Button").click(function(){
        window.location.href="./register.html";
    });
    //点击忘记密码
    $(".forget_password").click(function () {
        window.location.href="./findPassword.html";
    });
    //验证不为空
    function isNotBlank(data) {
        return (data == "" || typeof(data)  == "undefined"|| data == null ) ? false : true;
    }
    //验证手机号
    function checkTelNum(telNum){
        if(!/^1[0-9]{10}$/.test(telNum)){
            return false;
        }
        return true;
    }

</script>
</body>
</html>